<template>
  <div class="my_item">
    <nav-com title="中军值兑换" :showView="true" @back="backHandler()">
      <div @click="transferList()" style="font-size: 14px;color: #F86931">转兑记录</div>
    </nav-com>
          <!-- <Loading v-show="LOADING"></Loading> -->
    
    <van-list style="margin-top: 20px;padding-bottom:10vw">
      <van-checkbox-group v-model="checked" @change="chekChange">
        <div
          v-for="(item, index) in list"
          class="item"
          :style="plzr ? '' : ''"
          :key="index"
        >
          <div style="display: flex">
            <van-checkbox :name="index" shape="square"></van-checkbox>
          </div>
          <div class="item canUse">
            <div class="item__left">
              <div class="item__left-top">
                <span class="top__unit">¥</span>
                <span class="top__price">{{ item.money }}</span>
              </div>
              <div class="item__left-bottom" v-if="item.goods_id">
                指定商品使用
              </div>
            </div>
            <div class="item__right">
              <div class="item__right-top">
                <div class="top__title">{{ item.name }}</div>
                <div class="top__des">{{ item.remark }}</div>
              </div>
              <div class="item__right-bottom">
                <span>有效期{{ item.createtime | formatDateTime }}</span>
                <van-stepper
                  v-if="checked.indexOf(index) != -1"
                  v-model="data[index].num"
                  button-size="15"
                  :max="item.code_count"
                  :name="index"
                  @change="onChange"
                  disable-input
                />
              </div>
            </div>
          </div>
        </div>
      </van-checkbox-group>
    </van-list>
    <div>
      <div class="czqr">
        <div
          style="
            flex: 2;
            justify-content: center;
            background-color: #fafafa;
            justify-content: flex-start;
            padding: 0 20px;
            font-weight: 500;
            height: 50px;
            align-items: center;
            display: flex;
          "
          @click="close"
        >
          <div style="color: #070707">合计：</div>
          <div style="color: #f86830">{{countScore}} 分</div>
        </div>
        <!-- <div @click="transferList()" style="font-size: 14px;color: #F86931;margin-right:20px">兑换记录</div> -->
        <div
          style="
            flex: 1;
            justify-content: center;
            background-color: #f86831;
            height: 50px;
            align-items: center;
            display: flex;
            flex-direction: column;
          "
          @click="confirm"
        >
          <div>兑换</div>
          <div style="font-size: 0.1rem">可用中军值:{{shareUser.score}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
  <script>
import navCom from "@/component/nav";
import { codeLists } from "@/api/myExaminatonGaper.js";
import {
  couponIncrease,
  exchangeCoupon,
  exchangeCouponList,
  getuserInfo
} from "@/api/api";
import moment from "moment";
import { createApp } from "vue";
import { Checkbox, CheckboxGroup, Toast } from "vant";
import { Stepper } from "vant";
import { ref } from "vue";
import Loading  from '@/component/loading'

export default {
  props: {
    status: {
      type: Number,
    },
  },
  components: {
    navCom,Loading
  },
  filters: {
    /*
        时间格式自定义 只需把字符串里面的改成自己所需的格式
        */
    formatDateTime: function (date) {
      var date = new Date(date * 1000);
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var Hours = date.getHours();
      if (Hours >= 0 && Hours <= 9) {
        Hours = "0" + Hours;
      }
      var Minutes = date.getMinutes();
      if (Minutes >= 0 && Minutes <= 9) {
        Minutes = "0" + Minutes;
      }
      var Seconds = date.getSeconds();
      if (Seconds >= 0 && Seconds <= 9) {
        Seconds = "0" + Seconds;
      }
      var currentDate = date.getFullYear() + "-" + month + "-" + strDate;
      // var currentDate = date.getFullYear() + "-" + month + "-" + strDate
      //         + " " + Hours + ":" + Minutes + ":" + Seconds;
      return currentDate;
    },
  },
  data() {
    return {
      countScore:0,
      shareUser:JSON.parse(localStorage.getItem("shareUser")),
      value: 1,
      plzr: false,
      showConfirm: false,
      checked: [],
      loading: false,
      finished: false,
      list: [
        {
          id: 1,
          num: 2,
        },
      ],
      proxy: {
        1: "canUse",
        2: "used",
        3: "outLimit",
      },
      data:[],
      pageInfo: {
        offset: 1,
      },
      LOADING:false
    };
  },
  mounted(){
        // this.memberidCardsHandle()
        this.onLoad();
        this.getuserInfo();
    },
  methods: {
    transferList(){
      this.$router.push({name:'transferRecord', params:{type:5}})
    },
    calculation(){
       var data =this.data;
       var countScore=0;
       for (let index = 0; index < data.length; index++) {
        const item = data[index];
        if(item.check){
            countScore+=item.num*this.list[index].money
        }
       }
       this.countScore=countScore;
    },
    backHandler() {
      this.$router.go(-1);
      // if(weixin.isAndroid()){
      //   window.JS_TROOPS.goBack()
      // }else{
      //   this.$router.go(-1);
      // }
    },
    //步进器数量增减 name 下标 event 数据
    onChange(num, detail) {
      console.log(num, detail);
      this.data[detail.name].num=num;
      console.log( this.data);
      this.calculation();
    },
    chekChange() {
      console.log(this.checked);
      for (let index = 0; index < this.data.length; index++) {
        this.data[index].check=false;
      }
      for (const item of this.checked) {
            this.data[item].check=true;
      }
      console.log( this.data);
      this.calculation();
    },
    setup() {
      const checked = ref(["a", "b"]);
      return { checked };
    },
    operation() {
      this.plzr = true;
    },
    close() {
      this.plzr = false;
    },
    async transfer(item) {
      // console.log(item)
      this.$router.push(`/MyTransfer/${item.id}`);
    },
    confirm() {
        this.LOADING=true;
      console.log(this.checked.toString());
        if(this.checked.length==0){
            Toast("未选择");
            this.LOADING=false;
            return;
        }
        if(this.shareUser.score<this.countScore){
            Toast("当前可用中军值不足");
            this.LOADING=false;
            return;
        }
        
        var library=[]
        for (let index = 0; index < this.data.length; index++) {
            const element = this.data[index];
            const item={
                id:element.library_id+"",
                num:element.num+"",
            }
            if(element.check){
                library.push(item);
            }
        }
        console.log(library);
        exchangeCoupon({
            library:JSON.stringify(library)
           //  library:library
        }).then((res) => {
                this.LOADING=false;
                console.log("getuserInfo",res);
                Toast(res.data.msg);
                if(res.data.code==1){
                  this.backHandler();
                }
        })
    },
    getuserInfo(){
      console.log(JSON.parse(localStorage.getItem("shareUser")));
      if(this.shareUser!=null){
          return;
      }
      this.LOADING=true;
        getuserInfo().then((res) => {
                console.log("getuserInfo",res);
                this.LOADING=false;
                if(res.data.code==1){
                       this.shareUser=res.data.data;
                }
        })
    },
    async onLoad() {
      const res = await exchangeCouponList({});
      console.log("exchangeCouponList", res);

      if (res.data.code == 1) {
        var data=[];
        this.list = res.data.data;
        for (let index = 0; index <  this.list.length; index++) {
            const element = this.list[index];
            const item={};
            item.library_id=element.id;
            item.num=1;
            item.check=false;
            data.push(item);
        }
        this.data=data;
      } else {
        Toast(res.data.msg);
      }
    },
  },
};
</script>
  <style scoped>
    body {
      background-color: #ffffff !important;
    }
.my_item {
  /* margin: 0 auto; */
  width: 100vw;
  height: 100vh;
  background-color: white;
  height: 100%;
}
.item {
  background-repeat: repeat-y;
  /* background-position-x: 30px; */
  width: 89vw;
  height: 29.3vw;
  background-size: cover;
  margin-bottom: 4vw;
  display: flex;
  margin-left: 3vw;
}
.item.canUse {
  background-image: url("~@/assets/canUse.png");
}
.check {
  background-repeat: repeat-y;
  background-position-x: 30px;
}
.item.used {
  background-image: url("/assets/used.png");
}
.item.outLimit {
  background-image: url("~@/assets/outLimitTime.png");
}
.item__left {
  width: 29.3vw;
  height: 29.3vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.item__left-top {
}
.top__unit {
  font-size: 4.5vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
.top__price {
  /*48px*/
  font-size: 6.4vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  margin-top: 2.6vw;
}
.item__left-bottom {
  font-size: 3.2vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
}
.item__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 3.2vw;
  padding-left: 3.2vw;
  padding-bottom: 4.53vw;
}
.item__right-bottom {
  font-size: 3.2vw;
  display: flex;
  justify-content: space-between;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #a1a1a1;
}
.top__title {
  font-size: 4.5vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
}
.top__des {
  margin-top: 2.1vw;
  font-size: 3.3vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #777777;
}
.transfer {
  width: 18.1vw;
  height: 5.86vw;
  border-radius: 2.9vw;
  text-align: center;
  line-height: 5.86vw;
  border: 2px solid #ff8933;
  font-size: 3.2vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ff8933;
}
.plzr {
  height: 50px;
  background: #ff8933;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.czqr {
  height: 50px;
  /* background: #FF8933;
      border-radius: 4px; */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  right: 0;
  width: 100%;
  position: fixed;
  bottom: 0px;
}
.van-icon {
  border-radius: 5px !important;
}
</style>
  